<template>
  <div class="app-container">
    <el-row>
      <el-card class="box-card" shadow="never">
        <div slot="header" class="clearfix">
          <span class="role-span">客户详情</span>
          <div id="opt" style="float: right">
            <el-button-group>
              <el-button type="plain" v-if="customerDetail.opportunityId === 0" icon="el-icon-s-release" size="small" @click="handleAssign">分配跟进</el-button>
            </el-button-group>
            <el-button-group>
              <el-button type="plain" v-if="customerDetail.opportunityId !== 0" icon="el-icon-s-release" size="small" 
                @click="updateOpportunity(customerDetail.merchantCustomerId, customerDetail.opportunityId)">新建跟进</el-button>              
              <span v-if="customerDetail.opportunityId !== 0 && customerDetail.followStatus < 9">
                <router-link :to="{path: '/customer/sign', query: { merchantCustomerId: customerDetail.merchantCustomerId }}">
                  <el-button icon="el-icon-s-claim" size="small" style="width: 90px">报名</el-button>
                </router-link>
              </span>
            </el-button-group>
            <el-button type="primary" icon="el-icon-edit" size="small" @click="handleEdit">编辑</el-button>
          </div>
        </div>

        <el-form v-if="customerDetail != null" label-width="110px" size="small">
          <el-row>
            <el-col :span="8">
              <el-form-item label="学员姓名：">{{ customerDetail.studentName }}</el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="联系方式：">{{ customerDetail.mobile }}</el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="家庭住址：">{{ customerDetail.address }}</el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="8">
              <el-form-item label="客户姓名：">{{ customerDetail.name }}</el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="学员客户关系：">{{ customerDetail.relation }}</el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="学员学校：">{{ customerDetail.school }}</el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="8">
              <el-form-item label="学员年级：">{{ gradeName }}</el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="生日：">{{ customerDetail.birthDate | formatDate('yyyy-MM-dd') }}</el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="学员性别：">{{ customerDetail.genderName }}</el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
    </el-row>

    <el-card class="box-card" shadow="never" style="margin-top: 24px">
      <el-tabs v-model="activeTab" @tab-click="handleClick">
        <el-tab-pane name="opportunity" label="跟进详情">
          <div v-if="opportunity">
            <el-form label-position="left" >
              <el-form-item label="跟进进度：">{{ opportunity.followStatusTxt }}</el-form-item>
              <el-form-item label="客户意向：">{{ opportunity.intentionTxt }}</el-form-item>
              <el-form-item label="客户需求：">{{ opportunity.requirement }}</el-form-item>
              <el-form-item label="跟进备注：">{{ opportunity.remark }}</el-form-item>
              <el-form-item label="创建时间：">{{ opportunity.createdAt | formatDate }}</el-form-item>
            </el-form>
          </div>
          <div v-else>
            <p>暂无跟进信息</p>
          </div>
        </el-tab-pane>
        <!-- 跟进记录面板 -->
        <el-tab-pane name="followLog" label="跟进记录">
          <el-table v-loading="loading" v-if="followLogs != null" :data="followLogs" style="width: 100%">
            <el-table-column prop="opportunityId" label="跟进编号" width="180">
              <template slot-scope="scope">
                <span>{{ scope.$index+(page - 1) * size + 1 }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="followStatusName" label="跟进状态" width="180" />
            <el-table-column prop="content" label="跟进内容" />
            <el-table-column label="跟进时间">
              <template slot-scope="scope">
                {{ scope.row.createdAt | formatDate('yyyy-MM-dd hh:mm') }}
              </template>
            </el-table-column>
          </el-table>

          <!--分页组件-->
          <div class="pg-wrapper">
            <el-pagination
              :total="total"
              layout="total, prev, pager, next, sizes, jumper"
              @size-change="sizeChange"
              @current-change="pageChange"/>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <!-- 编辑客户 -->
    <form-dialog
      :visible="customerDialog.visible"
      :title="customerDialog.title"
      :merchant-customer-id="customerDialog.id"
      :is-private="customerDialog.isPrivate"
      :type="customerDialog.type"
      @close="closeFormDialog"/>

    <!-- 指派顾问 -->
    <el-dialog :visible.sync="batchFollowVisible" title="分配课程顾问" width="600px">
      <el-form :inline="true">
        <el-form-item label="选择课程顾问">
          <el-select v-model="batchFollowOperatorId" placeholder="选择课程顾问">
            <el-option v-for="o in operators" :label="o.label" :value="o.value" :key="o.value" />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button :loading="batchFollowLoading" type="primary" @click="followSubmit">确定</el-button>
      </div>
    </el-dialog>

    <el-dialog
      :title="followDialog.title"
      :visible.sync="followDialog.visible"
      :close-on-click-modal="false"
      width="600px">
      <follow-form :id="followDialog.id"
        :opportunity-id="followDialog.opportunityId"
        :operators="operators"
        :key="followDialog.id"
        @success="followSuccess" />
    </el-dialog>
  </div>
</template>

<script>
import FollowForm from './followForm'
import FormDialog from './formDialog'
import { listAdvisorOperators } from '@/api/account'
import { detail, getOpportunity, listFollowLog, batchOpportunity } from '@/api/customer'
export default {
  components: {
    FollowForm,
    FormDialog
  },
  data() {
    return {
      activeTab: 'opportunity',
      customerDetail: {},
      opportunity: null,
      followLogs: null,
      operators: [],
      followDialog: {
        title: '客户跟进',
        visible: false,
        id: 0,
        opportunityId: 0
      },
      customerDialog: {
        title: '编辑客户',
        visible: false,
        id: 0,
        type: 'edit',
        isPrivate: '0'
      },
      batchFollowVisible: false,
      batchFollowLoading: false,
      batchFollowOperatorId: null,
      // 
      loading: true,
      data: [],
      page: 1,
      size: 10,
      total: 0,
    }
  },
  computed: {
    gradeName() {
      return this.$store.getters.getGradeName(this.customerDetail.grade)
    }
  },
  created() {
    this.init()
    this.customerDialog.isPrivate = this.$route.params.type
    listAdvisorOperators().then(res => {
      this.operators = res.data
    })
  },
  methods: {
    init() {
      detail(this.$route.params.id).then(res => {
        this.customerDetail = res.data
        if (this.customerDetail.opportunityId !== null && this.customerDetail.opportunityId !== 0) {
          getOpportunity(this.customerDetail.opportunityId).then(res => {
            this.opportunity = res.data
          }).catch(err => {
            this.$message({
              message: '获取跟进详情失败!' + err.msg,
              type: 'error'
            })
          })
        }
      })
    },
    handleClick() {
      if (this.activeTab === 'followLog' && this.followLogs === null) {
        this.getFollowLogs()
      }
    },
    pageChange(e) {
      this.page = e
      this.getFollowLogs()
    },
    sizeChange(e) {
      this.page = 1
      this.size = e
      this.getFollowLogs()
    },
    getFollowLogs() {
      let params = {
        merchantCustomerId: this.$route.params.id,
        pageNum: this.page,
        pageSize: this.size
      }
      listFollowLog(params).then(res => {
        this.loading = false
        if (res.data != null) {
          this.total = res.data.total
          this.followLogs = res.data.list
        }
      }).catch(err => {
        this.loading = false
        this.$message({
          message: err.msg,
          type: 'error'
        })
      })
    },
    handleAssign() {
      this.batchFollowVisible = true
    },
    updateOpportunity(id, opportunityId) {
      this.followDialog.id = id
      this.followDialog.opportunityId = opportunityId
      this.followDialog.visible = true
    },
    handleSign() {
      this.$router.push({
        path: '/customer/sign'
      })
    },
    followSuccess() {
      this.followDialog.visible = false
    },
    handleEdit() {
      console.log('打开客户ID为：' + this.$route.params.id)
      this.customerDialog.id = Number(this.$route.params.id)
      this.customerDialog.title = '编辑客户'
      this.customerDialog.visible = true
    },
    followSubmit() {
      if (!this.batchFollowOperatorId) {
        this.$message.error('请选择一个课程顾问')
        return
      }
      this.batchFollowLoading = true
      const merchantCustomerIds = []
      merchantCustomerIds.push(this.$route.params.id)
      batchOpportunity({
        merchantCustomerIds: merchantCustomerIds,
        operatorId: this.batchFollowOperatorId
      }).then(res => {
        this.$message.success('客户跟进指派成功')
        this.$router.push({
          path: '/customer/public'
        })
      }).finally(() => {
        this.batchFollowLoading = false
        this.batchFollowVisible = false
      })
    },
    closeFormDialog(isRefresh) {
      this.customerDialog.visible = false
      if (isRefresh) {
        this.init()
      }
    }
  }
}
</script>

<style scoped lang="scss">
.el-tab-pane p {
  font-size: 14px;
  color: #909399;
}
</style>
